<template>
    <div class="videoPlayerContent">
        <div class="videoBox">
            <div class="videoBoxCloseBtn" @click="close">
                <img :src="closeImg" alt="">
            </div>
            <video id="video" ref="videoPlayer" controls style="width: 100%; height: auto">
                <source :src="props.videoVal" type="video/mp4">
                Your browser does not support HTML5 video.
            </video>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, defineEmits, onBeforeUnmount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import useSettingStore from '@/store/modules/setting'
const settings = useSettingStore()

import closeImg from '@/assets/img/close.png'

const props = defineProps({
    videoVal: {
        type: String,
        default: ''
    },
})

const emit = defineEmits(['close'])

const videoPlayer = ref<any>(null);

const close = () => {
    if (videoPlayer.value) {
        videoPlayer.value.pause()
    }
    emit('close')
}

const playVideo = () => {
    if (videoPlayer.value) {
        videoPlayer.value.play()
    }
}

const route = useRoute()
const router = useRouter()


onMounted(() => {
    settings.handlerHeaderShow(false)
    setTimeout(() => {
        playVideo()
    }, 500)
})

onBeforeUnmount(() => {
    settings.handlerHeaderShow(true)
})

</script>


<style lang="scss" scoped>
.videoPlayerContent {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: #000;
    .videoBox {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        .videoBoxCloseBtn {
            position: absolute;
            top: 10px;
            right: 0;
            z-index: 2;
            width: 40px;
            height: 40px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>